<template>
  <div class="history-container">
    <div id="modeler">
      <!-- 画布区域 -->
      <div id="canvas" ref="canvas"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { toLine } from '../../../utils/index'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import BpmnModeler from 'bpmn-js/lib/Modeler.js'
// 侧边栏样式
import 'bpmn-js-properties-panel/dist/assets/element-templates.css'
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'
import {
  processInstanceHistoryHighlight,
  processDefinitionDetail
} from "../../../api/process";
import { configColor, renderColor } from "../../../utils/process";
const props = defineProps({
  instanceId: {
    type: String,
    required: true
  }
})
let viewer: any
const showDiagram = async () => {

  // 创建BpmnModeler 加markRaw去除双向绑定作用域
  viewer =
    // markRaw(
    new BpmnModeler({
      // 渲染容器
      container: '#canvas',
    })
  // )
  const result = await processInstanceHistoryHighlight(props.instanceId)
  const colorJson = configColor(result)
  const xml = await processDefinitionDetail(result.id)
  createDiagram(xml, colorJson)
}
const createDiagram = (xml:string,colorJson: []) => {
  viewer!
    .importXML(xml)
    .then((result: any) => {
      viewer.get('canvas').zoom('fit-viewport');
      for (let i in colorJson) {
        renderColor(colorJson[i], viewer);
      }
      const { warnings } = result
      if (warnings && warnings.length) {
        warnings.forEach((warn: any) => console.warn(warn))
      }
    })
    .catch((err: any) => {
      const { warnings, message } = err
      console.log('could not import BPMN 2.0 XML', warnings, message)
    })
}
onMounted(async () => {
  showDiagram()

})
</script>
<style scoped lang="scss">
  .history-container {
    position: relative;
    height: 100%;
    text-align: left;
  }
  #modeler{
    height: 100%;
  }
  #canvas {
    height: 100vh;
    border: 1px solid rgb(121, 121, 121);
  }
  /* 右下角logo */
  //:deep(.bjs-powered-by) {
  //  display: none;
  //}
</style>
